Definition
The background property is a shorthand method for setting background-color, background-image, background-repeat, background-attachment and background-position.
body {background: white url('/images/sun.gif') repeat fixed top center} This is equivalent to:
Example :
body {
background-color: white;
background-image: url('/images/sun.gif');
background-repeat: repeat;
background-attachment: fixed;
background-position: top center;
}
Background-color
Definition :
The background-color property specifies the background color of an element. The screen shot below shows an element with the background color set to red.
Example ::
h1 {
background-color: red;
color: black;
}
Background-Image
Definition :
The background-image property specifies the background image for an element. The screen shot below shows a paragraph with a background image. We can use background-repeat: no-repeat; to stop repeat
Example : :
p {
background-image: url('/images/fox.gif');
background-color: white;
color: black;
}
Background-Attachment : & Position
Definition :
The background-attachment property specifies if background images should scroll or be fixed in the browser window. The following screen shot shows a Web browser with a background image of a giraffe in the bottom right corner. The background-attachment property is set to fixed so that during scrolling in the browser, the image does not move.
Example ::
body {
background: white url('images/giraffe.gif');
background-repeat: no-repeat;
background-position: right;
background-attachment: fixed;
}
